@color-primary: #3555CC;
@color-primary-dark: darken(@color-primary, 5%);
@color-primary-light: lighten(@color-primary, 30%);
@color-primary-light-bg: lighten(@color-primary, 45%);
@color-success: rgb(59, 179, 70);
@color-success-dark: rgb(48, 149, 59);
@color-success-light: rgb(236, 247, 236);
@color-danger: rgb(249, 57, 32);
@color-danger-dark: rgb(213, 37, 21);
@color-danger-light: rgb(254, 242, 237);
@color-warning: rgb(252, 136, 0);
@color-warning-dark: rgb(210, 103, 0);
@color-warning-light: rgb(255, 248, 234);
@color-link: rgb(0, 100, 250);
@color-link-dark: rgb(0, 76, 165);
@color-link-light: rgb(107, 167, 245);
@color-link-hover: rgb(0, 76, 165);
@color-tertiary: rgb(107, 112, 117);
@color-tertiary-dark: rgb(85, 91, 97);
@color-tertiary-light: rgb(198, 202, 205);
@color-text: #34495e;
@color-text-reverse: #FFFFFF;
@color-muted: #C4CFDB;
@color-body-bg: #F4F6F8;
@color-content-bg: #FFFFFF;
@color-body-line: #E5E9EE;
@color-input-bg: #F4F4F4;
@color-input-light-bg: #FFFFFF;
@color-body-block-bg: #F7F7F7;
@color-body-block-bg-hover: darken(@color-body-block-bg, 5%);
@color-body-block: #666666;
@color-body-block-hover: darken(@color-body-block, 5%);
@color-mark: rgba(0, 0, 0, 0.5);

:root, page {
    // 主色调
    --color-primary: var(--theme-color-primary, @color-primary);
    --color-primary-light: var(--theme-color-primary-light, @color-primary-light);
    --color-primary-light-bg: var(--theme-color-primary-light-bg, @color-primary-light-bg);
    --color-primary-dark: var(--theme-color-primary-dark, @color-primary-dark);
    // 成功、警告、危险、链接 颜色
    --color-success: @color-success;
    --color-success-dark: @color-success-dark;
    --color-success-light: @color-success-light;
    --color-warning: @color-warning;
    --color-warning-dark: @color-warning-dark;
    --color-warning-light: @color-warning-light;
    --color-danger: @color-danger;
    --color-danger-dark: @color-danger-dark;
    --color-danger-light: @color-danger-light;
    --color-link: @color-link;
    --color-link-light: @color-link-light;
    --color-link-dark: @color-link-dark;
    --color-link-hover: @color-link-hover;
    --color-tertiary: @color-tertiary;
    --color-tertiary-dark: @color-tertiary-dark;
    --color-tertiary-light: @color-tertiary-light;
    // 输入框
    --color-input-placeholder: @color-muted;
    // 文字颜色
    --color-text: var(--theme-color-text, @color-text);
    --color-text-reverse: var(--theme-color-text-reverse, @color-text-reverse);
    --color-muted: @color-muted;
    // 页面背景、内容背景、内容线条颜色、输入框背景
    --color-body-bg: var(--theme-color-body-bg, @color-body-bg);
    --color-content-bg: var(--theme-color-content-bg, @color-content-bg);
    --color-body-line: var(--theme-color-body-line, @color-body-line);
    --color-input-bg: var(--theme-color-input-bg, @color-input-bg);
    --color-input-light-bg: var(--theme-color-input-bg, @color-input-light-bg);

    // 页面色块（按钮、标签）
    --color-body-block-bg: @color-body-block-bg;
    --color-body-block-bg-hover: @color-body-block-bg-hover;
    --color-body-block: @color-body-block;
    --color-body-block-hover: @color-body-block-hover;
    // 遮罩层
    --color-mask: @color-mark;
    // 滚动条
    --color-scrollbar-bg: #FFFFFF;
    --scolor-scrollbar-thumb: #B3B3B3;
    // 渐变色背景
    --color-primary-gradient-bg: linear-gradient(45deg, var(--color-primary) 0%, var(--color-primary-light) 150%);
    // 图标
    --icon-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 256 256"><g><g><polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>');
    --box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .05);

    --size-radius: var(--theme-size-radius, 0.4rem);
    --size-margin: var(--theme-size-margin, 0.5rem);
    --size-margin-lg: var(--theme-size-margin-lg, 2rem);
    --size-padding: var(--theme-size-padding, 0.5rem);

    --font-size-root: var(--theme-font-size-root, 20px);
    --font-size: var(--theme-font-size, 0.65rem);
    --font-size-lh: var(--theme-font-size, 0.65rem * 1.1);
    --font-size-medium: var(--theme-font-size, 0.8rem);
    --font-size-large: var(--theme-font-size-large, 1rem);
    --font-size-small: var(--theme-font-size-small, 0.6rem);

    --container-width: var(--theme-container-width, 60rem);

}

[data-theme="dark"] {
    &:root, page, & {
        --color-link: #a3a7bb;
        --color-link-hover: #cacdda;
        --color-body-bg: #151728;
        --color-content-bg: #1b1e32;
        --color-body-line: #424554;
        --color-text: #a3a7bb;
        --color-input-placeholder: #80859f;
        --color-input-bg: #1b1e32;
        --color-input-light-bg: #1b1e32;
        --color-muted: #80859f;
        --color-body-block-bg: #545767;
        --color-body-block-bg-hover: #9396a8;
        --color-body-block: #F8F8F8;
        --color-body-block-hover: #FFFFFF;
        --color-mask: rgba(240, 240, 240, 0.5);
    }
}

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        &:root, page, & {
            --color-body-bg: #151728 !important;
            --color-content-bg: #1b1e32 !important;
            --color-body-line: #424554 !important;
            --color-text: #a3a7bb !important;
            --color-input-placeholder: #80859f !important;
            --color-input-bg: #1b1e32 !important;
            --color-input-light-bg: #1b1e32 !important;
            --color-muted: #80859f !important;
            --color-body-block-bg: #545767 !important;
            --color-body-block-bg-hover: #9396a8 !important;
            --color-body-block: #F8F8F8 !important;
            --color-body-block-hover: #FFFFFF !important;
        }
    }
}
